<template>
	<!-- 2021-01-08 - 9：22   分类搜索页面 -->
	<view>
		<view>
			<uni-search-bar  radius="100" @confirm="search" @input="input" @cancel="cancel"/>
			<!-- <view class="search-result">
				<text class="search-result-text">当前输入为：{{ searchVal }}</text>
			</view> -->
		</view>
		<view>
			
			<dl v-for="(item,index) in list" :key="index">
				
				
					<dt>{{item.dtt}}</dt> <dt class="reset" @click="reset()" >{{item.dt}}</dt> 
					
					
				<dd v-for="(idd,index1) in item.ddd" :key="index1"><button class="xbtn" type="default" size="mini" plain="true" @click="xuan(index,index1)" :class="{'selectedColor' :idd.checked==true}">{{idd.name}}</button></dd>
			</dl>
		</view>
	</view>
</template>

<script>
	export default {
		data() {	
			return {
				list: [{
					dtt: '搜索历史',
					dt: '清空记录',
					ddd: [{
					name:'语言',
					checked:false,
					}, {
					name:'考研',
					checked:false,
					}]
				}, {
					dtt: '热门搜索',
					ddd: [{
					name:'系统',
					checked:false,
					}, {
					name:'运营',
					checked:false,
					}, {
					name:'深度',
					checked:false,
					}, {
					name:'线性',
					checked:false,
					}, {
					name:'学习',
					checked:false,
					}, {
					name:'3dmax',
					checked:false,
					}, {
					name:'spring',
					checked:false,
					}, {
					name:'ui',
					checked:false,
					}, {
					name:'爬虫',
					checked:false,
					}, {
					name:'web',
					checked:false,
					}]
				}]
			}
		},
		methods: {
			xuan(index,index1) {
				if(this.list[index].ddd[index1].checked==false){
					console.log(this.list[index].ddd[index1].name);
					this.list[index].ddd[index1].checked=true;
				}else{
					this.list[index].ddd[index1].checked=false;
				}
			},
			reset(){
				 this.list[0].ddd=null;
			},
			onNavigationBarButtonTap(val) {
			        
			
			        if (val.index == 1) {
			         uni.navigateTo({
			           url: '/pages/ppt/sortPPT',
			         });
			
			        };
			
			      }
		}
	}
</script>

<style>
	.reset{
		position: absolute;
		right: 1%;
		top:7.2%;
		border: 0px;
	}
	.cont{
            position: fixed;
			bottom: 5px;
			width: 100%;		
			text-align: center;
        }
	.btn {
		background-color: #33b17b;
		width: 200px;
		z-index: 99;
		color: #FFFFFF;
		border-radius: 20px 20px 20px 20px;
	        }
	dl {
		margin-left: 1%;
	}
	.selectedColor{
		background-color: #33b17b !important;
		color: #FFFFFF !important;
	}
	dt {
		padding: 0 auto;
	}
	dt:not(first) {
		padding-top: 5%;
		
	}
	.xbtn{
		border: 1px solid #f3f4f6 !important;
		color: #99a4bd;
		border-radius: 20px 20px 20px 20px;
	}
	dd {
		display: inline-block;
		margin-left: 10px;
		margin-top: 10px;
	}
	h3{
		text-align: center;
	}
	
	.content {
		height: 2100upx;
		margin-top: 40upx;
		margin-bottom: 50upx;
	}
</style>
